<template>
  <el-dialog
    title="项目属性"
    :visible.sync="dialogVisible"
    width="90%"
    v-dialogDrag
    class="properties-dialog"
  >
    <!-- 顶部信息栏 -->
    <div class="header-modern">
      <div class="modern-item">
        <div class="modern-icon factory">
          <i class="el-icon-office-building"></i>
        </div>
        <div class="modern-content">
          <div class="modern-label">厂家</div>
          <div class="modern-value">{{ ModelFInfo.factoryName || '-' }}</div>
        </div>
      </div>
      
      <div class="divider"></div>
      
      <div class="modern-item">
        <div class="modern-icon type">
          <i class="el-icon-cpu"></i>
        </div>
        <div class="modern-content">
          <div class="modern-label">仪器类型</div>
          <div class="modern-value">{{ ModelFInfo.typeName || '-' }}</div>
        </div>
      </div>
      
      <div class="divider"></div>
      
      <div class="modern-item">
        <div class="modern-icon name">
          <i class="el-icon-monitor"></i>
        </div>
        <div class="modern-content">
          <div class="modern-label">仪器名称</div>
          <div class="modern-value">{{ ModelFInfo.instrumentModelName || '-' }}</div>
        </div>
      </div>
    </div>

    <!-- 折叠面板容器 -->
    <el-collapse v-model="activeNames" accordion class="collapse-container">
      <!-- 仪器参数 -->
      <el-collapse-item name="1" title="仪器参数">
        <el-table :data="paramList" border stripe size="small">
          <el-table-column align="center" label="参数" prop="param" />
          <el-table-column align="center" label="参数名称" prop="parameterName" />
          <el-table-column align="center" label="单位" prop="unit" />
        </el-table>
      </el-collapse-item>

      <!-- 仪器分量 -->
      <el-collapse-item name="2" title="仪器分量">
        <el-table :data="apparatusList" border stripe size="small">
          <el-table-column align="center" label="分量" prop="comp" />
          <el-table-column align="center" label="分量名称" prop="compname" />
          <el-table-column align="center" label="类型" prop="valueType">
            <template slot-scope="scope">
              <el-tag :type="getValueTypeTag(scope.row.valueType)" size="mini">
                {{ getValueTypeText(scope.row.valueType) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="上限" prop="upperLimit">
            <template slot-scope="scope">
              <span class="greenText">{{ scope.row.upperLimit }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="下限" prop="lowerLimit">
            <template slot-scope="scope">
              <span class="redText">{{ scope.row.lowerLimit }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="单位" prop="unit" />
          <el-table-column align="center" label="精度" prop="precision" />
          <el-table-column align="center" label="公式" prop="calculationFormula" show-overflow-tooltip />
          <el-table-column align="center" label="使用">
            <template slot-scope="scope">
              <el-tag :type="scope.row.sign == 1 ? 'success' : 'info'" size="mini">
                {{ scope.row.sign == 1 ? '已使用' : '未使用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="收敛">
            <template slot-scope="scope">
              <el-tag :type="scope.row.comP_CON == 1 ? 'success' : 'info'" size="mini">
                {{ scope.row.comP_CON == 1 ? '已收敛' : '未收敛' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="显示顺序" prop="inx" />
          <el-table-column align="center" label="计算顺序" prop="indCalc" />
          <el-table-column align="center" label="默认值" prop="defaultVal" />
        </el-table>
      </el-collapse-item>

      <!-- 关联 Point -->
      <el-collapse-item name="3" title="关联 Point">
        <el-table :data="instrmentPointList" border stripe size="small">
          <el-table-column align="center" label="POINT" prop="Point" />
          <el-table-column align="center" label="名称" prop="PointName" />
          <el-table-column align="center" label="测值选择" prop="V_TypeID" />
          <el-table-column align="center" label="是否自定时刻" prop="V_IsMoment">
            <template slot-scope="scope">
              <el-tag :type="scope.row.V_IsMoment == 1 ? 'success' : 'danger'" size="small">
                {{ scope.row.V_IsMoment == 1 ? '是' : '否' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="取值时刻" prop="V_Moment" />
          <el-table-column align="center" label="是否默认值设置" prop="V_IsDefl">
            <template slot-scope="scope">
              <el-tag :type="scope.row.V_IsDefl == 1 ? 'success' : 'danger'" size="small">
                {{ scope.row.V_IsDefl == 1 ? '是' : '否' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="默认值" prop="V_Defl" />
        </el-table>
      </el-collapse-item>

      <!-- 分量设置 -->
      <el-collapse-item name="4" title="分量设置">
        <el-table :data="compSetList" border stripe size="small">
          <el-table-column align="center" label="分量" prop="comp" />
          <el-table-column align="center" label="分量名称" prop="compname" />
          <el-table-column align="center" label="类型" prop="valueType" />
          <el-table-column align="center" label="仪器上限" prop="upperLimit">
            <template slot-scope="scope">
              <span class="greenText">{{ scope.row.upperLimit }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="仪器下限" prop="lowerLimit">
            <template slot-scope="scope">
              <span class="redText">{{ scope.row.lowerLimit }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="测点分类上限" prop="max">
            <template slot-scope="scope">
              <el-input
                size="small"
                v-model="scope.row.max"
                placeholder="请输入"
                @blur="handleSaveSetComp(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column align="center" label="测点分类下限" prop="min">
            <template slot-scope="scope">
              <el-input
                size="small"
                v-model="scope.row.min"
                placeholder="请输入"
                @blur="handleSaveSetComp(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column align="center" label="单位" prop="unit" />
          <el-table-column align="center" label="精度" prop="precision" />
          <el-table-column align="center" label="公式" prop="calculationFormula" show-overflow-tooltip />
          <el-table-column align="center" label="使用">
            <template slot-scope="scope">
              <el-tag :type="scope.row.sign == 1 ? 'success' : 'info'" size="mini">
                {{ scope.row.sign == 1 ? '已使用' : '未使用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="收敛">
            <template slot-scope="scope">
              <el-tag :type="scope.row.comP_CON == 1 ? 'success' : 'info'" size="mini">
                {{ scope.row.comP_CON == 1 ? '已收敛' : '未收敛' }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>

    <!-- 加载状态 -->
    <el-skeleton v-if="loading" :rows="6" animated />
  </el-dialog>
</template>

<script>
import {
  GetInstrumentCOMPByModeId,
  GetParameterByModeId,
  InstrumentPOINT,
  QueryCOMP,
  GetModelFInfo,
  setQueryCOMP
} from "@/api/https";

export default {
  props: {
    rightNodeInfo: {
      type: Object,
      default: () => ({})
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      ModelFInfo: {},
      apparatusList: [],
      paramList: [],
      instrmentPointList: [],
      compSetList: [],
      dialogVisible: this.visible,
      activeNames: ["1"], // 默认展开第一项
      loading: false
    };
  },
  watch: {
    visible(newVal) {
      this.dialogVisible = newVal;
      if (newVal && this.rightNodeInfo) {
        this.getData();
      }
    },
    dialogVisible(newVal) {
      this.$emit("update:visible", newVal);
    }
  },
  methods: {
    async getData() {
      this.loading = true;
      try {
        const [infoRes, compRes, paramRes, pointRes, compSetRes] = await Promise.all([
          GetModelFInfo({ InstrumentModelID: this.rightNodeInfo.node.instrumentModelID }),
          GetInstrumentCOMPByModeId(this.rightNodeInfo.node.instrumentModelID),
          GetParameterByModeId(this.rightNodeInfo.node.instrumentModelID),
          InstrumentPOINT({ InstrumentModelID: this.rightNodeInfo.node.instrumentModelID }),
          QueryCOMP({
            InstrumentModelID: this.rightNodeInfo.node.instrumentModelID,
            INSTR_ID: this.rightNodeInfo.node.instR_ID
          })
        ]);

        if (infoRes.isSuccess) {
          this.ModelFInfo = infoRes.data;
        }
        this.apparatusList = compRes.isSuccess ? compRes.data : [];
        this.paramList = paramRes.isSuccess ? paramRes.data : [];
        this.instrmentPointList = pointRes.isSuccess ? pointRes.data : [];
        this.compSetList = compSetRes.isSuccess ? compSetRes.data : [];
      } catch (error) {
        console.error("获取数据失败:", error);
        this.$message.error("数据加载失败");
      } finally {
        this.loading = false;
      }
    },
    handleSaveSetComp(data) {
      setQueryCOMP({
        id: data.id,
        INSTR_ID: data.INSTR_ID,
        COMPID: data.COMPID,
        max: data.max,
        min: data.min
      }).then(res => {
        if (res.isSuccess) {
          this.$message.success("设置成功！");
        } else {
          this.$message.error(res.errorMessage);
        }
      });
    },
    getValueTypeTag(type) {
      const map = { 0: "success", 1: "primary", 2: "warning" };
      return map[type] || "info";
    },
    getValueTypeText(type) {
      const map = { 0: "初始值", 1: "中间值", 2: "结果值" };
      return map[type] || "未知";
    }
  }
};
</script>

<style scoped>
.properties-dialog {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
}

.header-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.collapse-container {
  margin-top: 10px;
}

.greenText {
  color: #67c23a;
}

.redText {
  color: #f56c6c;
}

.el-table {
  margin-top: 10px;
}

.el-collapse-item >>> .el-collapse-item__header {
  font-weight: bold;
  font-size: 14px;
}

.header-modern {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 20px;
}

.modern-item {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
  justify-content: center;
}

.modern-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
}

.modern-icon.factory {
  background: linear-gradient(135deg, #409eff, #79bbff);
}

.modern-icon.type {
  background: linear-gradient(135deg, #67c23a, #95d475);
}

.modern-icon.name {
  background: linear-gradient(135deg, #e6a23c, #eebe77);
}

.modern-content {
  display: flex;
  flex-direction: column;
}

.modern-label {
  font-size: 13px;
  color: #909399;
  margin-bottom: 4px;
}

.modern-value {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.divider {
  width: 1px;
  height: 40px;
  background: #e6e8eb;
}
</style>